<template>
  <div class="wallet">
    <van-grid :column-num="2" square>
      <van-grid-item icon="qr" text="收付款" border />
      <van-grid-item border>
        <van-icon name="balance-pay" size="28" />
        <span>钱包</span>
        <span>￥250</span>
      </van-grid-item>
    </van-grid>
    <h5>生活服务</h5>
    <van-grid :column-num="3" square border>
      <van-grid-item icon="idcard" text="信用卡还款" />
      <van-grid-item icon="cash-back-record" text="借钱" />
      <van-grid-item icon="cash-on-deliver" text="手机充值" />
      <van-grid-item icon="after-sale" text="理财通" />
      <van-grid-item icon="friends-o" text="生活缴费" />
      <van-grid-item icon="manager-o" text="医疗健康" />
    </van-grid>
    <h5>三方服务</h5>
    <van-grid :column-num="3" square border>
      <van-grid-item icon="logistics" text="火车票机票" />
      <van-grid-item icon="new-arrival-o" text="新品特卖" />
      <van-grid-item icon="gift-card-o" text="外卖" />
      <van-grid-item icon="tv-o" text="电影票" />
      <van-grid-item icon="thumb-circle-o" text="吃喝玩乐" />
      <van-grid-item icon="like-o" text="酒店" />
      <van-grid-item icon="question-o" text="拼夕夕" />
      <van-grid-item icon="cluster-o" text="二手物品" />
      <van-grid-item icon="wap-home-o" text="租房" />
      <van-grid-item icon="shopping-cart-o" text="购物" />
    </van-grid>
  </div>
</template>

<script>
import Vue from "vue";
import { Grid, GridItem } from "vant";
Vue.use(Grid);
Vue.use(GridItem);
export default {};
</script>

<style lang="scss" scoped>
html,
body {
  height: 100%;
}
.wallet {
  height: 100%;
  overflow-x: hidden;
  h5 {
    padding-left: 15px;
    color: gray;
  }
  span {
    font-size: 12px;
  }
  van-grid-item:hover {
    background-color: rgba(151, 232, 123, 0.1);
  }
}
</style>
